<template>
    <div>
        <div class="breadcrumb">
            <div class="container clear">
                <div class="breadcrumb-main clear">
                    <div class="breadcrumb-hd">您的位置：</div>
                    <ul class="breadcrumb-bd clear">
                        <li class="breadcrumb-item">
                            <router-link to="/">首页</router-link>
                        </li>
                        <li class="breadcrumb-item cur">新闻中心</li>
                    </ul>
                </div>
            </div>
        </div>
    
        <!-- news-list -->
        <div class="news-list">
            <div class="container">
                <div class="news-list-container">
                    <div class="news-list-main">
                        <div class="news-list-item clear" v-for="item in news">
                            <div class="new-list-img">
                                <router-link :to="{path:'/News/NewsDetail/'+item.Id}">
                                    <img :src="item.NewsImgUrl" alt="">
                                </router-link>
                            </div>
                            <div class="new-list-con">
                                <h3 class="new-list-hd">
                                    <router-link :to="{path:'/News/NewsDetail/'+item.Id}">
                                        {{item.NewsTitle}}
                                    </router-link>
                                </h3>
                                <div class="new-list-bd">{{cutNewsText(item.NewsContentText)}}</div>
                                <div class="new-list-ft clear">
                                    <router-link class="new-list-more" :to="{path:'/News/NewsDetail/'+item.Id}">
                                        查看更多&gt;&gt;
                                    </router-link>
                                    <span class="new-list-time">{{item.CreateDate | CreateDateFilter}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- page -->
                    <div class="page-main clear">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
export default {
    data() {
        return {
            // 新闻列表
            news: [],

            pageSize: 0,
            PageIndex: 0,
            total: 0

        }
    },
    // 过滤器
    filters: {
        CreateDateFilter(date) {
            let newDate = date.match(/[0-9]/g).join('');
            let newDateObj = new Date(parseInt(newDate));
            return newDateObj.getFullYear() + '-' + (newDateObj.getMonth() + 1) + '-' + newDateObj.getDate()
        },
        cutNewsHotText(a) {

        }
    },
    // 计算属性
    computed: {

    },
    // 方法
    methods: {
        cutNewsText(value) {
            let width = 280;
            if (typeof value === 'string') {
                return value.substr(0, width) + '...'
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            var that = this;
            $.get('http://192.168.0.155:155/api/Main/NewsList', {
                "PageSize": that.pageSize.toString(),
                "PageIndex": val,
                "HasHot": "true"
            }, (res) => {
                this.news = eval(res).data
                this.total = eval(res).Count
            })
        }

    },
    mounted() {
        var that = this
        this.pageSize = 5
        this.PageIndex = 1
        this.$nextTick(function () {
            // 新闻列表
            $.get('http://192.168.0.155:155/api/Main/NewsList', {
                "PageSize": that.pageSize.toString(),
                "PageIndex": that.PageIndex.toString(),
                "HasHot": "true"
            }, (res) => {
                this.news = eval(res).data
                this.total = eval(res).Count
            })
        })
    }
}
</script>


<style>
/* page */

.el-pagination {
    float: right;
}



/* news-list*/

.new-list-img {
    float: left;
    width: 365px;
}

.new-list-img img {
    width: 365px;
    height: 208px;
}

.new-list-con {
    float: left;
    width: 753px;
    margin-left: 30px;
}

.new-list-con .new-list-hd {
    color: #323232;
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 14px;
}

.new-list-con .new-list-bd {
    font-size: 16px;
    line-height: 150%;
    color: #b4b4b4;
    margin-bottom: 3px;
    text-align: justify;
    height: 144px;
    overflow: hidden;
}

.news-list-item {
    padding-bottom: 25px;
    border-bottom: 1px dashed #b4b4b4;
    margin-bottom: 25px;
}

.new-list-con .new-list-ft .new-list-more {
    float: left;
    font-size: 15px;
    color: #646464;
}

.new-list-con .new-list-ft .new-list-more:hover {
    color: #0096df;
}

.new-list-time {
    float: right;
    font-size: 15px;
    color: #b4b4b4;
}

.news-list-container {
    border: 1px solid #ececec;
    border-radius: 5px;
    background: #fff;
    padding: 25px;
    margin-bottom: 50px;
}
</style>
